<template>
    <div class="JNPF-common-layout">

        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                                                                <el-col :span="6">
                                <el-form-item label="收藏时间">
                                        <el-date-picker v-model="query.todate" value-format="timestamp" format="yyyy-MM-dd"
                                                        start-placeholder="开始日期" end-placeholder="结束日期"  type="daterange" />
                                </el-form-item>
                            </el-col>
                        <el-col :span="6">
                                <el-form-item label="问题">
                                        <el-input v-model="query.question" placeholder="请输入" clearable>  </el-input>
                                </el-form-item>
                            </el-col>
                        <el-col :span="6">
                                <el-form-item label="所属公司">
                                        <el-select v-model="query.company" placeholder="请选择"
                                                   clearable>
                                            <el-option v-for="(item, index) in companyOptions" :key="index"
                                                       :label="item.fullName" :value="item.id"
                                                       :disabled="item.disabled"></el-option>
                                        </el-select>
                                </el-form-item>
                            </el-col>
                        <template v-if="showAll">
                                    <el-col :span="6">
                                        <el-form-item label="所属岗位领域">
                                                <el-select v-model="query.field" placeholder="请选择"
                                                           clearable>
                                                    <el-option v-for="(item, index) in fieldOptions" :key="index"
                                                               :label="item.fullName" :value="item.id"
                                                               :disabled="item.disabled"></el-option>
                                                </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="所属岗位类别">
                                                <el-select v-model="query.type" placeholder="请选择"
                                                           clearable>
                                                    <el-option v-for="(item, index) in typeOptions" :key="index"
                                                               :label="item.fullName" :value="item.id"
                                                               :disabled="item.disabled"></el-option>
                                                </el-select>
                                        </el-form-item>
                                    </el-col>
                        </template>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                                <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">
                                    展开
                                </el-button>
                                <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                                    收起
                                </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <div>
                                    <el-button type="text" icon="el-icon-download" @click="exportData()" >导出
                                    </el-button>
                                    <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()" >批量删除
                                    </el-button>
                    </div>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                                     @click="reset()"/>
                        </el-tooltip>
                        <screenfull isContainer/>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="list" @sort-change='sortChange'  has-c @selection-change="handleSelectionChange">
                            <el-table-column prop="question" label="问题" width="0" align="left"
/>
                            <el-table-column prop="company" label="所属公司" width="0" align="left"
/>
                            <el-table-column prop="field" label="所属岗位领域" width="0" align="left"
/>
                            <el-table-column prop="type" label="所属岗位类别" width="0" align="left"
/>
                            <el-table-column prop="upuserid" label="上传者id" width="0" align="left"
/>
                            <el-table-column prop="todate" label="收藏时间" width="0" align="left"
/>
                        <el-table-column label="操作" fixed="right"
                                         width="150" >
                            <template slot-scope="scope">
                                <el-button type="text" @click="viewAnswerForm(scope.row)" v-if="scope.row.answer">查看回答</el-button>
                                        <el-button type="text" class="JNPF-table-delBtn"  @click="handleDel(scope.row.id)">删除
                                        </el-button>
                            </template>
                        </el-table-column>
                </JNPF-table>
                    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData"/>
            </div>
        </div>
        <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh"/>
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download"/>
      <el-dialog
          v-if="answerDialogVisible"
          :visible.sync="answerDialogVisible"
          title="查看详情"
          width="60%"
          append-to-body
          class="answer-dialog"
        >
          <div class="answer-title">问题内容</div>
          <div class="answer-content" v-html="curQuestion"></div>
          <div class="answer-title">回答内容</div>
          <div class="answer-content" v-html="currentAnswer"></div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="answerDialogVisible = false">关闭</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import request from '@/utils/request'
    import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
    import JNPFForm from './Form'
    import ExportBox from './ExportBox'
    import {previewDataInterface} from '@/api/systemData/dataInterface'

    export default {
        components: {JNPFForm, ExportBox},
        data() {
            return {
              answerDialogVisible: false,
                currentAnswer: '',
                curQuestion:'',
                showAll: false,
                query: {
                                todate:undefined,
                                question:undefined,
                                company:undefined,
                                field:undefined,
                                type:undefined,
                },
                treeProps: {
                    children: 'children',
                    label: 'fullName',
                    value: 'id'
                },
                list: [],
                listLoading: true,
 multipleSelection: [],                    total: 0,
                listQuery: {
                        currentPage: 1,
                        pageSize: 20,
                    sort: "desc",
                    sidx: "todate",
                },
                formVisible: false,
                exportBoxVisible: false,
                columnList: [
                    {prop: 'todate', label: '收藏时间'},
                    {prop: 'question', label: '问题'},
                    {prop: 'company', label: '所属公司'},
                    {prop: 'field', label: '所属岗位领域'},
                    {prop: 'type', label: '所属岗位类别'},
                    {prop: 'upuserid', label: '上传者id'},
                    {prop: 'userid', label: '用户id'},
                ],
                            companyOptions:[],
                            companyProps:{"label":"fullName","value":"id"},
                            fieldOptions:[],
                            fieldProps:{"label":"fullName","value":"id"},
                            typeOptions:[],
                            typeProps:{"label":"fullName","value":"id"},
            }
        },
        computed: {},
        created() {
                this.initData()
                    this.getcompanyOptions();
                    this.getfieldOptions();
                    this.gettypeOptions();
        },
        methods: {
            viewAnswerForm(row) {
          this.currentAnswer = row.answer || '暂无回答内容';
           this.curQuestion=row.question;
          this.answerDialogVisible = true;
        },
                    getcompanyOptions() {
                        getDictionaryDataSelector('b0441013ce1241c7bd81812199306f2a').then(res => {
                            this.companyOptions = res.data.list
                        })
                    },
                    getfieldOptions() {
                        getDictionaryDataSelector('90076a6023284cb1adc217fff660e6b5').then(res => {
                            this.fieldOptions = res.data.list
                        })
                    },
                    gettypeOptions() {
                        getDictionaryDataSelector('5913e9ee6d514f919fe0572f941b3308').then(res => {
                            this.typeOptions = res.data.list
                        })
                    },
            sortChange({column, prop, order}) {
                this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
                this.listQuery.sidx = !order ? '' : prop
                this.initData()
            },
            initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                request({
                    url: `/api/example/Whu_knowledgecollection/getList`,
                    method: 'post',
                    data: _query
                }).then(res => {
                    var _list =[];
                    for(let i=0;i<res.data.list.length;i++){
                        let _data = res.data.list[i];
                        _list.push(_data)
                    }
                    this.list = _list
                        this.total = res.data.pagination.total

                    this.listLoading = false
                })
            },
            handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/example/Whu_knowledgecollection/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
                handleSelectionChange(val) {
                    const res = val.map(item => item.id)
                    this.multipleSelection = res
                },
                handleBatchRemoveDel() {
                    if (!this.multipleSelection.length) {
                        this.$message({
                            type: 'error',
                            message: '请选择一条数据',
                            duration: 1500,
                        })
                        return
                    }
                    const ids = this.multipleSelection.join()
                    this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        request({
                            url: `/api/example/Whu_knowledgecollection/batchRemove/${ids}`,
                            method: 'DELETE'
                        }).then(res => {
                            this.$message({
                                type: 'success',
                                message: res.msg,
                                onClose: () => {
                                    this.initData()
                                }
                            });
                        })
                    }).catch(() => {
                    })
                },
            addOrUpdateHandle(id, isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.JNPFForm.init(id, isDetail)
                })
            },
            exportData() {
                this.exportBoxVisible = true
                this.$nextTick(() => {
                    this.$refs.ExportBox.init(this.columnList)
                })
            },
            download(data) {
                let query = {...data, ...this.listQuery, ...this.query}
                request({
                    url: `/api/example/Whu_knowledgecollection/Actions/Export`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    if (!res.data.url) return
                    window.location.href = this.define.comUrl + res.data.url
                    this.$refs.ExportBox.visible = false
                    this.exportBoxVisible = false
                })
            },
            search() {
                this.listQuery = {
                        currentPage: 1,
                        pageSize: 20,
                    sort: "desc",
                    sidx: "todate",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                        currentPage: 1,
                        pageSize: 20,
                    sort: "desc",
                    sidx: "todate",
                }
                this.initData()
            }
        }
    }
</script>
<style>
.JNPF-common-layout {
  background: #f7f5f0;
  border-radius: 16px;
  padding: 12px 12px; /* 原24px 28px，减小内边距 */
  box-shadow: 0 2px 12px 0 rgba(200, 180, 120, 0.08);
  border: 1px solid #f0e6d2;
}

.JNPF-common-layout-center {
  min-height: 70vh; /* 让内容区至少撑满70%视口高度，可根据实际调整 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.JNPF-common-layout-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f7f5f0;
}

.JNPF-common-search-box {
  background: #f7f5f0;
  border-radius: 12px;
  padding: 18px 24px 8px 24px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px 0 rgba(200, 180, 120, 0.06);
  border: 1px solid #f0e6d2;
}

.el-form-item__label {
  color: #a68c5a;
  font-weight: 500;
  font-size: 15px;
}

.el-input, .el-select, .el-date-picker {
  border-radius: 6px !important;
  background: #f6f3ea !important;
}

.el-button {
  border-radius: 6px !important;
  font-weight: 500;
}

.el-button--primary {
  background: linear-gradient(90deg, #f3e7c9 0%, #e8d7b1 100%);
  color: #fff;
  border: none;
}

.el-button--primary:hover {
  background: #f3e7c9;
  color: #fff;
}

.el-table {
  background: #f7f5f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(200, 180, 120, 0.06);
  border: 1px solid #f0e6d2;
  margin-bottom: 18px;
}

.el-table th {
  background: #f3e7c9 !important;
  color: #a68c5a !important;
  font-weight: 600;
  font-size: 15px;
}

.el-table td {
  background: #f7f5f0 !important;
  color: #6d5c36;
  font-size: 14px;
}

.el-pagination {
  width: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f5f0;
  margin: 0;
  box-sizing: border-box;
}

.el-table .el-button--primary {
  background: linear-gradient(90deg, #f3e7c9 0%, #e8d7b1 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
}

.el-table .el-button--primary:hover {
  background: #f3e7c9;
  color: #fff;
}

.JNPF-common-head {
  background: #f6f3ea;
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px 0 rgba(200, 180, 120, 0.06);
}

.JNPF-common-head-right .el-link {
  color: #a68c5a !important;
}

.answer-content {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  background-color: #fafafa;
  font-size: 15px;
  color: #6d5c36;
}

.el-dialog__header {
  background: #f3e7c9;
  border-radius: 8px 8px 0 0;
}

.el-dialog__title {
  color: #a68c5a;
  font-weight: 600;
  font-size: 17px;
}

.dialog-footer .el-button {
  border-radius: 6px;
  font-weight: 500;
}

.dialog-footer .el-button:hover {
  background: #f3e7c9;
  color: #fff;
}
.answer-dialog {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.answer-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.answer-content {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  background-color: #fafafa;
  font-size: 14px;
  color: #666;
}

.answer-content::-webkit-scrollbar {
  width: 6px;
}

.answer-content::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.answer-content::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.answer-content >>> .ql-editor {
  padding: 0;
}
</style>
